<template>
  <div>
    <!-- 修改探访表单 -->
    <el-form :model="formData" ref="formData" label-width="100px">
      <el-form-item label="探访主题" prop="caseStdTopic">
        <el-input v-model="formData.caseStdTopic"></el-input>
      </el-form-item>
      <!-- 其它表单项 -->
      <el-form-item label="参加人数" prop="caseStdNum">
        <el-input v-model="formData.caseStdNum"></el-input>
      </el-form-item>
      <el-form-item label="探讨开始时间" prop="caseStdStartTime">
        <el-date-picker v-model="formData.caseStdStartTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="报告开始时间" prop="caseStdReStartTime">
        <el-date-picker v-model="formData.caseStdReStartTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="报告结束时间" prop="caseStdReEndTime">
        <el-date-picker v-model="formData.caseStdReEndTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="参考费用" prop="caseStdPcAmount">
        <el-input v-model="formData.caseStdPcAmount"></el-input>
      </el-form-item>
      <el-form-item label="主持人" prop="caseStdCompere">
        <el-input v-model="formData.caseStdCompere"></el-input>
      </el-form-item>
      <el-form-item label="参考主持人" prop="caseStdGuests">
        <el-input v-model="formData.caseStdGuests"></el-input>
      </el-form-item>
      <el-form-item label="探访状态" prop="caseStdState">
        <el-input v-model="formData.caseStdState" placeholder="请输入数字：1表示活动取消，2表示活动正常"></el-input>
      </el-form-item>
      <el-form-item label="取消时间" prop="caseStdCaTime">
        <el-date-picker v-model="formData.caseStdCaTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="结束时间" prop="caseStdEndTime">
        <el-date-picker v-model="formData.caseStdEndTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
      </el-form-item>
      <el-form-item label="取消理由" prop="caseStdCaReason">
        <el-input type="textarea" v-model="formData.caseStdCaReason"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交</el-button>
        <el-button @click="$router.go(-1)">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      formData: {
        id: '',  // 修改时需要传递探访记录的唯一标识符，例如探访的ID
        caseStdTopic: '',
        caseStdNum: '',
        caseStdStartTime: '',
        caseStdReStartTime: '',
        caseStdReEndTime: '',
        caseStdPcAmount: '',
        caseStdCompere: '',
        caseStdGuests: '',
        caseStdState: '',
        caseStdCaTime: '',
        caseStdEndTime: '',
        caseStdCaReason: ''
      }
    };
  },
  created() {
    // 在组件创建时，根据路由参数获取要修改的记录ID
    const id = this.$route.params.id;
    this.fetchRecord(id);
  },
  methods: {
    fetchRecord(id) {
      // 根据记录ID从后端获取记录详情
      axios.get(`http://localhost:8080/caseStd/${id}`)
        .then(response => {
          // 将获取的记录数据填充到表单数据中
          this.formData = response.data;
        })
        .catch(error => {
          console.error('获取记录详情失败', error);
          this.$message.error('获取记录详情失败');
        });
    },
    submitForm() {
      // 提交表单数据到后端进行修改
      axios.put(`http://localhost:8080/caseStd/${this.formData.caseStdId}`, this.formData)
        .then(response => {
          this.$message.success('修改成功');
          // 修改成功后，可以返回上一页或刷新当前页面
          this.$router.go(-1); // 返回上一页
        })
        .catch(error => {
          console.error('修改失败', error);
          this.$message.error('修改失败');
        });
    },
    cancelEdit() {
      this.$router.go(-1); // 取消修改，返回上一页
    }
  }
};
</script>

<style scoped>
/* 样式省略 */
</style>
